<template>
  <div class="sevenss">
    <div v-for="(v,index) in sevenarr" :key="index" class="sevee">
        <img :src="v.img1" alt="">
    </div>
  </div>
</template>

<script>
export default {
    data(){
          return{
              sevenarr:[]
          }
      },
      methods:{
       
      },
      mounted(){       
          this.$http({
              url:"http://localhost:3000/banner",
              method:"get"
          }).then(res=>{
              this.sevenarr = res.data[0].data.data1;
          })
        //   console.log(this.sevenarr);
        }  
}
</script>

<style scoped>
.sevenss{
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.sevenss div:nth-child(1){
    height: 57vw;
}
.sevenss div:nth-child(1) img{
    height: 57vw;
}
.sevenss div:nth-child(7){
    position: absolute;
    left: 46vw;
    top: 30vw;
}
.sevee{
    width: 43vw;
    height: 27vw;
    margin: 3vw 0 0 4vw;
}
.sevee img{
    width: 100%;
    height:100%;
    border-radius: 11px;
}
</style>